<template>
  <div class="container">
    <img class="mapImg" @click="toPage('pages/line12345')" src="../../assets/img/complaint12345.png" />
    <!-- <img class="mapImg" @click="toPage('pages/satisfaction')" src="../../assets/img/complaintSatisf.png" /> -->
    <img class="mapImg" @click="toPage('pages/complaintPlatform/appraise/appraise')" src="../../assets/img/complaintSatisf.png" />
    <img class="mapImg" @click="toPage('pages/bidding_complaint')" src="../../assets/img/complaintBidding.png" />
    <!-- <div class="card">
      <div class="card-bottom">
        <div class="grid-item" @click="toPage('pages/line12345')">
          <img class="icon" src="https://tuanfeng.whkxzj.com/profile/static/20230110142821-12345热线.png" />
          <div class="text">12345热线</div>
        </div>
        <div class="grid-item" @click="toPage('pages/satisfaction')">
          <img class="icon" src="https://tuanfeng.whkxzj.com/profile/static/20230110142432-群众评价.png" />
          <div class="text">好差评</div>
        </div>
        <div class="grid-item" @click="toPage('pages/bidding_complaint')">
          <img class="icon" src="https://tuanfeng.whkxzj.com/profile/static/20230110142004-招投标投诉.png" />
          <div class="text">招投标投诉</div>
        </div>
      </div>
    </div> -->
  </div>
</template>
<script>
export default {
  data() {
      return {
          
      };
  },
  onShareAppMessage() {},
  onShow() {},
  methods: {
      toPage(url, params) {
          this.$u.route({
              url,
              params,
          });
      },
  },
};
</script>
<style scoped lang="scss">
@import "../../assets/scss/common.scss";

.container {
  min-height: 100vh;
  background-color: #fafafa;
  box-sizing: border-box;
  padding: 15px;
  .mapImg {
    width: 100%;
    height: 120px;
  }
  .grids {
      display: flex;
      flex-direction: column;
      border-radius: 8px;
      background-color: #fff;
      margin-bottom: 15px;
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1) !important;
      .grids-title {
          padding: 15px 15px 8px;
          border-bottom: 1px solid #efefef;
          font-size: 18px;
          font-weight: bold;
      }
      .grids-content {
          display: flex;
          flex-wrap: wrap;
          padding: 15px;
          .grid {
              width: 25%;
              display: flex;
              flex-direction: column;
              align-items: center;
              .icon {
                  width: 50px;
                  height: 50px;
                  margin-bottom: 5px;
              }
              .text {
                  text-align: center;
                  font-size: 13px;
              }
          }
      }
  }
  .card {
      padding: 15px 0;
      border-radius: 8px;
      background-color: #fff;
      margin-bottom: 15px;
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1) !important;
      .card-header {
          padding: 0 15px 8px;
          border-bottom: 1px solid #efefef;
          margin-bottom: 12px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .card-title {
              font-size: 18px;
              font-weight: bold;
              display: flex;
              align-items: center;
              img {
                  width: 5px;
                  height: 18px;
                  margin-right: 10px;
              }
          }
      }
      .card-bottom{
          display: flex;
          align-items: center;
          padding: 0 15px;
          .grid-item{
              width: 25%;
              display: flex;
              flex-direction: column;
              align-items: center;
              .icon{
                  width: 45px;
                  height: 45px;
                  margin-bottom: 5px;
              }
              .text{
                  font-size: 13px;
              }
          }
      }
  }
}
</style>

